<template>
	<div class="body">
		<!-- 关于我们 -->
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>版本更新</span>
			</div>
		</div> -->
		<div class="min">
			<div class="xinxi">
				<div class="tubiao"><img :src="img" alt=""></div>
				<p>{{obj.name}}</p>
				<p class="upnum">当前版本：{{version}}</p>
			</div>
			<div class="number border" @click="update">
				<span class="numname">版本更新</span>
				<span class="num">
					<span>最新版本</span>
					<img src="../../assets/homeimg/滑动右.png" />
				</span>
				<!-- <van-dialog v-model="show"  show-cancel-button showConfirmButton @cancel="del" @confirm="submit">
				    <p style="height:3.75rem;text-align: center;line-height: 3.75rem;">检测到有新版本，是否立即更新？</p>
				</van-dialog> -->
			</div>
		</div>
	</div>
</template>
<script>
	import mineApi from "@/api/mine";
	import {
		Dialog, Toast
	} from 'vant';
	export default {
		data() {
			return {
				type: 1,
				obj: {},
				version: 5, //当前版本号
				newversion: '', //新的版号
				downloadUrl: '', //下载地址
				show: false,
				enforce: '0',//是否强制更新
				img:null
			};
		},
		components: {
			// [Image.name]: Image
		},
		created() {
			this.appSource();
			this.getupdate();
			window.h5_android && window.h5_android.appVersion();
			window.webkit.messageHandlers && window.webkit.messageHandlers.geVersion_js_oc.postMessage([]);
		},
		mounted() {
			window.getVersion = this.getVersion;
		},
		methods: {
			// del(){
			// 	this.show = false;
			// },
			// submit(){
			// 	this.show = false;
			// 	plus.runtime.openURL(this.downloadUrl);
			// },
			getVersion(version) {
				// Dialog.alert({
				// 	message: '版本号' + version,
				// }).then(() => {
				// // on close
				// });
				this.version = version;
				// this.$toast.success(version)
			},
			returnGo() {
				this.$router.go(-1);
			},
			appSource() {
				const u = navigator.userAgent;
				const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
				if (isiOS) {
					this.type = 2;
					return "ios";
				} else {
					this.type = 1;
					return "andriod";
				}
			},
			getupdate() {
				this.$http.post('/api/set/app',{type: this.type}).then(res => {
					console.log(res);
					this.img = res.data.image;
					this.newversion = res.data.newversion;
					this.downloadUrl = res.data.downloadurl;
				});
			},
			update() {
				if (this.version != this.newversion) {
					if(this.enforce == 1){
						Dialog.alert({
							title: '版本更新',
							message: '检测到有新版本，立即更新',
						}).then(() => {
						// on close
							this.aaaa()
						});
					}
					Dialog.confirm({
							title: '版本更新',
							message: '检测到有新版本，是否立即更新？',
						})
						.then(() => {
							// on confirm
							// console.log(this.downloadUrl)
							this.aaaa()
						})
						.catch(() => {
							// on cancel
						});
				} else {
					// this.show = false;
					this.$toast.success('当前已是最新版本！')
				}

			},
			aaaa(){
				// Toast(this.type)
				let data = {
					url:this.downloadUrl
				}
				if(this.type == 1){
					window.h5_android && window.h5_android.postVersion(JSON.stringify(data));
				}else{
					// plus.runtime.openURL(this.downloadUrl);
					// window.open(this.downloadUrl)
					// window.location.href = this.downloadUrl
					// Dialog.confirm({
					// 	title: window.webkit.messageHandlers,
					// 	message: window.webkit.messageHandlers.goUpdateVersion_js_oc,
					// })
					// .then(() => {
					// 	// on confirm
					// 	// console.log(this.downloadUrl)
					// })
					// .catch(() => {
					// 	// on cancel
					// });
					setTimeout(function(){
						window.webkit.messageHandlers.appupdateversion_js.postMessage(['123'])
					},500)
				}
			}
		}
	};
</script>
<style lang="scss" scoped="scoped">
	.body {
		color: #333333;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		// font-weight: bold;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		position: relative;
		border-bottom: 1px solid #dcdcdc;
		color: #333333;
		font-size: 1.25rem;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}

	// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}

	.min {
		flex: 1;
		// height: 18.75rem;
		background: #fff;

		.xinxi {
			margin: 0 auto;
			margin-top: 1rem;
			width: 6.25rem;

			.tubiao {
				width: 6.25rem;
				// height: 5.75rem;
				background: #ef7f5a;
				border-radius: 0.3125rem;
				display: flex;
				img{
					width: 100%;
					height: 100%;
					// max-height: 100%;
					// flex-shrink: 0;
				}
			}

			p {
				color: #333333;
				font-size: 0.875rem;
				height: 1.875rem;
				line-height: 1.875rem;
				text-align: center;
			}

			.upnum {
				font-size: 0.75rem;
				height: 1.125rem;
				line-height: 1.125rem;
			}
		}

		.number {
			display: flex;
			height: 2.75rem;
			align-items: center;
			justify-content: space-between;

			.numname {
				margin-left: 0.875rem;
				font-size: 0.9375rem;
			}

			.num {
				position: relative;
				margin-right: 1.625rem;

				span {
					font-size: 0.75rem;
					color: #333333;
					height: 2.75rem;
					line-height: 2.75rem;
					margin-right: 0.5rem;
				}

				img {
					position: absolute;
					top: 0.875rem;
					display: inline-block;
					width: 0.625rem;
					height: 1rem;
				}
			}
		}

		.border {
			border-bottom: 1px solid #dcdcdc;
		}
	}
</style>
